<template>
  <div class="panel-3">
    <div class="box1">
      <div style="font-weight: bold">救援力量</div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="救援队伍" name="team" v-loading="teamLoading">
        <div class="container">
          <div v-for="item in rescureTeam" :key="item.id" class="item">
            <div class="tag-group">
              <el-tag :type="item.style" size="mini">{{ item.type }}</el-tag>
              <div class="status" :style="{'color':item.color}">【{{ item.status }}】</div>
            </div>
            <div>【{{ item.name }}】</div>
            <el-button
              type="danger"
              :loading="item.loading"
              @click="dispatchTeam(item.id, item)"
              size="mini"
              :disabled="item.disable"
            >
              <span v-if="!item.isDispatched">派遣</span>
              <span v-else>已派遣</span>
            </el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="MSDS" name="second"> </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
//映射字典
var status = ["待命", "已派遣", "接到任务", "正在途中", "已到达"];
var color = ["#35b378","#f5222d","#409EFF","#E6A23C","#0DA5AA"];
var type = [
{},
{name: "应急救护类", style: "danger"},
{name: "应急消防类", style: "primary"},
{name: "通信保障类", style: "info"},
{name: "危险化学品类", style: "warning"},
{name: "环境应急救援队", style: "success"}];
import { ListRecureTeam,dispatch } from "../../../../api/accidenthandle/panel3";
export default {
  name: "panel3",
  data() {
    return {
      activeName: "team",
      rescureTeam: [],
      teamLoading: false,
      resourece: [],
    };
  },
  methods: {
    getRescureTeam() {
      this.teamLoading = true;
      ListRecureTeam().then((res) => {
        console.log(res);
        if (res.code == 200) {
          //初始化列表
          this.rescureTeam=[];
          for (var item of res.data) {
            var temp = {
              id: item.id,
              type: type[item.typeCode].name,
              style:type[item.typeCode].style,
              name: item.teamName,
              status: status[item.status],
              loading: false,
              color:color[item.status],
              isDispatched: (item.status==0)?false:true,
              disable: item.status==0?false:true,
              longitude:item.longitude,
              latitude:item.latitude,
            };
            this.rescureTeam.push(temp);
          }
        }
        this.teamLoading = false;
      });
    },
    handleClick(tab, event) {
      //切换标签的时候也需要加载数据
      if (tab.name == "team") {
        this.getRescureTeam();
      }
    },
    //派遣操作
    dispatchTeam(id, body) {
      body.loading = true;

      setTimeout(() => {
        //从vuex获取事件id
        var aId = this.$store.state.accidentHandle.accindentId;
        dispatch(id,aId).then((res)=>{
        if(res.code==200){
          body.color="#f5222d";
          body.status="已派遣";
          body.loading = false;
          body.isDispatched = true;
          body.disable = true;
        }
        this.submitPosition(body);
      });
      }, 200);
    },
    //上传数据(经纬度到父组件的地图上)
    submitPosition(item){
      var position = {
        longitude:item.longitude,
        latitude:item.latitude,
      }
      this.$emit('transfer',position);
    }
    
  },
  mounted() {
    //初始化的时候加载数据
    this.getRescureTeam();
  },
};
</script>

<style scoped>
.panel-3 {
  width: 360px;
  height: 450px;
  position: absolute;
  right: 10px;
  top: 100px;
  z-index: 1;
  background-color: #ffffff;
  padding: 5px;
}
.box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  /* margin-bottom: 5px; */
}
.status {
  font-size: 14px;
  /* color: #35b378; */
}
.item {
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: #dcdfe6 1px solid;
  margin-bottom: 3px;
}
.tag-group {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>